{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '滑块验证插件:example/verification/index', '拼图滑块插件'])}

<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header">
          <div class="card-title">拼图滑块插件 imgVer</div>
        </header>
        <div class="card-body">
        
          <p>配合模板字体图标替换插件原本用到的图片。这里插件没有涉及到后端。</p>
        <div id="imgVer" class="d-inline-block"></div>
        
        </div>
      </div>
  </div>

</div>

<script type="text/javascript">
    $(document).ready(function() {
        imgVer({
            el:'$("#imgVer")',
            width:'260',
            height:'116',
            img:[
                "{$xpConfig['web_static']}/example/images/verification/1.jpg",
                "{$xpConfig['web_static']}/example/images/verification/2.jpg",
                "{$xpConfig['web_static']}/example/images/verification/3.jpg",
                "{$xpConfig['web_static']}/example/images/verification/4.jpg",
                "{$xpConfig['web_static']}/example/images/verification/5.jpg",
            ],
            success:function () {
                console.log("成功")
                // 在这里验证验证码
                // 验证码验证成功后执行登录
            },
            error:function () {
                //alert('错误执行')
            }
        });
    });
    </script>